<% episode = Episode.new(current_page) %>

<% content_for :header do;end %>

<% wrap_layout :layout do %>
  <div class="row">
    <div class="small-12 columns">
      <%= partial "next-class" %>
    </div>
  </div>

  <section class="screencast">
    <div class="title-row">
      <h2 class="title">
        <%= current_page.title %>
      </h2>
      <h2 class="episode_number">
        <small>#</small><%= episode.number %>
      </h2>
    </div>

    <%= partial 'pubdate-row', locals: {episode: episode, article: current_page} %>

    <div class="summary-row">
      <div class="episode_summary enlarged" data-swiftype-index="true">
        <%= current_page.summary %>
      </div>
    </div>

    <div class="video-row">

      <div class="video-column">
        <div class="video_wrapper">
          <video poster="<%= episode.poster_url %>"
            controls="controls" preload="none" class="placeholder"
            id="episode_<%= episode.number %>_placeholder">
            <% if episode.format == 'mp4' %>
              <source src="<%= episode.mp4.url %>" type="video/mp4" />
            <% else %>
              <source src="<%= episode.ogg.url %>" type="video/ogg" />
              <source src="<%= episode.quicktime.url %>" type="video/x-m4v" />
            <% end %>
          </video>
        </div>
      </div>

      <aside class="downloads">

        <div class="download-videos">
          <h4>Download</h4>
          <ul class="downloads-list">
            <% if episode.format == 'mp4' %>
              <li class="mp4">
                <a href="<%= episode.mp4.url %>">MP4</a>
                <span class="stats"><%= number_to_human_size(episode.mp4.size) %></span>
              </li>
            <% else %>
              <li class="ogg">
                <a href="<%= episode.ogg.url %>">OGG</a>
                <span class="stats"><%= number_to_human_size(episode.ogg.size) %></span>
              </li>
              <li class="quicktime">
                <a href="<%= episode.quicktime.url %>">Quicktime</a>
                <span class="stats"><%= number_to_human_size(episode.quicktime.size) %></span>
              </li>
            <% end %>
          </ul>
        </div>

        <div class="video-metadata">
          <p class="video-duration">
            <%# http://wiki.whatwg.org/wiki/Time_element#duration %>
            Run time:
            <time datetime="<%= episode.running_datetime %>">
              <%= episode.running_time %>
            </time>
          </p>

          <p>
            <%= link_to 'Read transcript', transcript_for_episode(episode.number) %>
          </p>
        </div>

      </aside>

    </div>

    <div class="content-row">
      <dl class="accordion" data-accordion>
        <dd>
          <a href="#shownotes">Shownotes<span class="disclosure"></span></a>
          <div id="shownotes" class="content" data-swiftype-index="true">
            <%= extended_article(current_page) %>
          </div>
        </dd>
        <dd>
          <a href="#comments" class="show-comments">Comments<span class="disclosure"></span></a>
          <div id="comments" class="content">
            <%= partial "disqus" %>
          </div>
        </dd>
      </dl>
    </div>

  </section>

  <%= partial "social-sharing-buttons",
    :locals => locals.merge(label: "Like this video? Spread the word!") %>

  <%= partial "prev-next-links", :locals => locals %>

  <%= partial "related-content", :locals => locals %>

  <div class="row">
    <div class="small-12 columns">
      <%= partial "footer-main" %>
    </div>
  </div>


<% end %>

